<template>
  <div class="product primary-blue">
    <common-header />
    <div class="app-center app-container">
      <div class="commodity-wrap flex-start">
        <commodity-filter :recommendCate="recommendCate" :cid="cid" @clickCateItem="clickCateItem"/>
        <div class="commodity-content">
          <commodity-content-title />
          <div style="padding: 22px 28px;">
            <product-module :lists="lists" :gap="['20px', '11px']" >
<!--              <template v-slot:pagination>-->
<!--                <common-pagination :page="pageTotal" :pageNo="pageNo" @pageClick="pageClick" />-->
<!--              </template>-->
            </product-module>
          </div>
          <common-pagination :page="pageTotal" :pageNo="pageNo" @pageClick="pageClick" v-if="pageTotal > 0" />
        </div>
      </div>
    </div>
    <common-footer />
  </div>
</template>
<script setup>
import {ref} from "vue";
import { useRouter } from "vue-router";
import { productList } from "@/api/index.js";
import CommonHeader from "@/components/common/CommonHeader.vue";
import CommodityFilter from "@/components/product/CommodityFilter.vue";
import CommonFooter from "@/components/common/CommonFooter.vue";
import CommodityContent from "@/components/product/CommodityContent.vue";
import ProductModule from "@/components/common/ProductModule.vue";
import CommodityContentTitle from "@/components/product/CommodityContentTitle.vue";
import CommonPagination from "@/components/common/CommonPagination.vue";
const router = useRouter()
const recommendCate = ref([])
const cid = ref(-1)
cid.value = router.currentRoute.value.query.cid || -1
const pageNo = ref(1)
const pageTotal = ref(0)
const lists = ref([])
const getProductList = () => {
  productList({
    page: pageNo.value,
    pid: Number(cid.value)
  }).then(res => {
    recommendCate.value = res.data.category
    lists.value = res.data.list.data
    pageTotal.value = res.data.list.last_page
  }).catch(err => {})
}
getProductList()
const clickCateItem = (arg) => {
  cid.value = arg
  getProductList()
}
const pageClick = (arg) => {
  pageNo.value = arg
  getProductList()
}
</script>
<style scoped>
.commodity-wrap {
  align-items: flex-start;
  margin-top: -24px;
}
.commodity-wrap {
  align-items: flex-start;
  margin-top: -13px !important;
}
.commodity-wrap {
  min-height: calc(-362px + 100vh);
}
.commodity-content{
  width: 100%;
}
</style>
